<template>
	<view class="userPay">
		<navBar isBack backColor="#000000" color="#000000" background="#fff"></navBar>
		
		<!-- 商品列表 -->
		<view class="uP_shopList">
			<view class="uP_shopListTit">
				<image src="https://manager.ryz1620.com/static/guide/list.png" mode=""></image>
				商品清单
				
			</view>
			<view v-for="(item,index) in shopList" :key="index">
				<view class="uP_roomShop">
					<view class="uP_roomNameBorder">
						<view class="uP_roomName">
							<view>
								<image :src="item.store_logo" mode=""></image>
							</view>
							<view class="uP_roomInfo">{{item.store_name}}<p>{{item.roomAddress}}</p></view>
						</view>
						<view class="uP_goRoomInfo">
							<view class="uP_goRoom"><view class="iconfont icon-tubiaozhizuomoban1"></view></view>
						</view>
					</view>
					<view class="uP_shop" v-for="(item1,index1) in item.medical_list">
						<view class="uP_shopInfo">
							<view class="uP_shopImg">
								<image :src="item1.main_imgurl" mode=""></image>
								<view class="uP_shop5D" @click.stop="">
									<view class="uP_5Dicon iconfont icon-tubiaozhizuomoban"></view>
									5D
								</view>
							</view>
							<view class="uP_shopTxt">
								<view class="uP_shopTxtTop omit-1">{{item1.product_title}}</view>
								<view class="uP_shopSpec omit-1" v-if="!item1.attribute[0].attr_name"><span v-for="(i,v) in item1.attribute">{{i.value+' / '}}</span></view>
								<view class="uP_shopSpec omit-1" v-else><span v-for="(i,v) in item1.attribute">{{i.attr_name+':'+i.attr_value+'; '}}</span></view>
								<view class="uP_shopPrice">
									<view>
										￥{{item1.price}}
										<span>￥{{item1.primary_price}}</span>
									</view>
									<span class="uP_shopNum">x{{item1.cart_num}}</span>
								</view>
							</view>
						</view>
						<!-- 每一件产品的border -->
						<view class="uP_shopInfoBorder" v-if="item.medical_list.length>1"></view>
					</view>
					<!-- 每一家店铺的border -->
					<view class="uP_shopBorder"><view></view></view>
				</view>
			</view>
			<!-- 订单号 -->
			<view class="uP_orderNum">
				订单号：128937912369106
				<span>原价：¥{{primary_price}}</span>
			</view>
		</view>
		<!-- 支付按钮 -->
		<view class="uP_payBtn">
			<view class="uP_payBtnOn">
				<view class="uP_payPrice">
					优惠：¥{{coupon_price}}
					<span>实付：¥{{needPrice}}</span>
				</view>
				<view @click="to" class="uP_nowPay">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_mall from '@/service/mall.js'
	export default{
		components:{
			navBar
		},
		data(){
			return{
				shopList:[],
				single_id:null,
				coupon_price:null, //已优惠金额
				needPrice:null, //实付价格
				primary_price:null, //原价
				payStatus:true, //清单列表转过来的是否用户支付
			}
		},
		onLoad(options) {
			const scene = decodeURIComponent(options.scene) //二维码扫码时的参数
			this.single_id = scene.single_id?scene.single_id:options.single_id;
			let token = this.$store.state.index.token;
			if(!token){
				uni.setStorageSync('single_id',this.single_id)
				uni.setStorageSync('payStatus',this.payStatus)
				uni.redirectTo({
					url: '/pages_login/pages/login/login/index',
				});
			}else{
				this.getListInfo()
			}
		},
		methods:{
			// 获取清单详情
			getListInfo(){
				service_mall.getGenerList({single_id:this.single_id}).then(res=>{
					if(res.code==1){
						let data = res.data
						this.shopList = data.list?data.list:[];
						this.primary_price = data.primary_price;  //原价
						this.coupon_price = data.coupon_price;  //已优惠金额
						this.needPrice = data.price;   // 实付价格
					}
				})
			},
			
			to(){
				uni.navigateTo({
					// url:'../../../pagesOne/distri/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userPay{
		width: 100%;
		height: 100%;
		background-color: #fff;
		margin-bottom: 40rpx;
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.uP_shopList{
			width: 686rpx;
			padding: 40rpx 0rpx 26rpx;
			background-color: #F9F6F3;
			position: relative;
			margin: 62rpx auto 196rpx;
			border-radius: 24rpx;
			.uP_shopListTit{
				width: 394rpx;
				height: 78rpx;
				background-color: #CBAF87;
				border-radius: 32rpx;
				display: flex;
				padding: 0 106rpx;
				align-items: center;
				position: absolute;
				top: -39rpx;
				left: 146rpx;
				font: 500 36rpx/50rpx PingFang SC;
				color: #fff;
				image{width: 30rpx;height: 34rpx;margin-right: 8rpx;}
			}
			.uP_roomShop{
				.uP_roomNameBorder{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #fff;
					padding: 0 24rpx 0 26rpx;
					.uP_roomName{
						display: flex;
						align-items: center;
						padding: 30rpx 0rpx 28rpx;
						font: 600 30rpx/40rpx PingFang SC;
						color: #1A1C20;
						image{width: 34rpx; height: 34rpx;margin-right:16rpx; padding: 8rpx 8rpx;width: 50rpx;height: 50rpx;background-color: #fff;border-radius: 50%;}
						.uP_roomInfo{
							p{
								font: 400 22rpx/32rpx PingFang SC;
								color: #A0A0A0;
							}
						}
					}
					.uP_goRoom{
						width: 76rpx;
						height: 44rpx;
						border: 2rpx solid #E7DEC8;
						border-radius: 22rpx;
						color: #CBAF87;
						text-align: center;
						font: 500 22rpx/42rpx PingFang SC;
						view{font-size: 22rpx;}
						width: 76rpx;
						margin-left: 16rpx;
					}
				}
				.uP_shop{
					padding-left: 24rpx;
					.uP_shopInfo{
						padding: 26rpx 24rpx 16rpx 0;
						display: flex;
						.uP_shopImg{
							image{width: 170rpx;height: 170rpx;}
							margin-right: 24rpx;
							position: relative;
							.uP_shop5D{
								.uP_5Dicon{font-size: 18rpx;height: 24rpx;}
								padding: 6rpx 0;
								width: 64rpx;
								height: 64rpx;
								border-radius: 50%;
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								margin:auto;
								background-color: rgba(0,0,0,0.2);
								border: 2rpx solid rgba(255,255,255,0.2);
								color: #fff;
								display: flex;
								flex-direction: column;
								align-items: center;
								font: 400 18rpx/32rpx PingFang SC;
							}
						}
						.uP_shopTxt{
							width: 100%;
							color: #1A1C20;
							display: flex;
							flex-direction: column;
							.uP_shopTxtTop{width: 444rpx;}
							.uP_shopSpec{font: 500 24rpx/34rpx PingFang SC;color: #939393;}
							font: 600 28rpx/40rpx PingFang SC;
							.uP_shopPrice{
								display: flex;
								margin-top: 48rpx;
								align-items: center;
								justify-content: space-between;
								view{
									font: bold 32rpx/44rpx PingFang SC;
									color: #EF5854;
									span{text-decoration: line-through;font: bold 22rpx/36rpx PingFang SC;color: #C6C6C6;}
								}
								.uP_shopNum{
									width: 72rpx;
									height: 42rpx;
									background-color: #fff;
									border-radius: 8rpx;
									text-align: center;
									line-height: 42rpx;
								}
							}
						}
					}
					.uP_shopInfoBorder{width: 100%;height: 0; border-bottom: 2rpx solid #fff;}
				}
				.uP_shopBorder{
					padding: 0 24rpx;
					view{
						width: 100%;
						height: 16rpx;
						background-color: #fff;
						border-radius: 8rpx;
					}
				}
			}
			// 订单号
			.uP_orderNum{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 26rpx;
				padding: 0 24rpx;
				font: 500 24rpx/34rpx PingFang SC;
				color: #939393;
				span{font: 500 32rpx/44rpx PingFang SC;color: #666666;}
			}
		}
		.uP_payBtn{
			width: 100%;
			height: 176rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			left: 0;
			height: calc(176rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(176rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			.uP_payBtnOn{
				width: 686rpx;
				height: 166rpx;
				margin: 0 auto;
				background-color: #1A1C20;
				border-radius: 8rpx;
				padding: 28rpx 36rpx 26rpx 46rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.uP_payPrice{
					display: flex;
					flex-direction: column;
					font: 400 40rpx/56rpx PingFang SC;
					color: #E9423E;
					span{color: #fff;}
				}
				.uP_nowPay{
					width: 168rpx;
					height: 70rpx;
					border: 2rpx solid #fff;
					border-radius: 12rpx;
					background-color: #E9423E;
					font: 500 28rpx/70rpx PingFang SC;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>
